<!DOCTYPE HTML>
<html lang="en-US" >
    
    <head>
        
        <meta charset="UTF-8">
        <title>依旧有效的雅虎优化法则 | 前端性能优化</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 1.0.3">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
        
    
    
    
    <link rel="next" href="./performance-optimization-tool-using-actual-combat.html" />
    
    
    <link rel="prev" href="./common-optimization-indicator.html" />
    

        
    </head>
    <body>
        
        
<link rel="stylesheet" href="gitbook/style.css">


        
    <div class="book"  data-level="2" data-basepath="." data-revision="1510986466881">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
    	
    	
    	

        

        
    
        
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="./index.html">
                        <i class="fa fa-check"></i>
                        
                         全栈视野的网页优化
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="1" data-path="common-optimization-indicator.html">
            
                
                    <a href="./common-optimization-indicator.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                         常用的性能优化指标
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter active" data-level="2" data-path="yahooperformancerules.html">
            
                
                    <a href="./yahooperformancerules.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                         依旧有效的雅虎优化法则
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="3" data-path="performance-optimization-tool-using-actual-combat.html">
            
                
                    <a href="./performance-optimization-tool-using-actual-combat.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                         性能优化工具实战
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="4" data-path="cache-http-protocol-header-field.html">
            
                
                    <a href="./cache-http-protocol-header-field.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                         HTTP缓存
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="5" data-path="ondemand-resource-loading.html">
            
                
                    <a href="./ondemand-resource-loading.html">
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                         按需加载资源
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="6" data-path="good-practices-for-the-different-network-types.html">
            
                
                    <a href="./good-practices-for-the-different-network-types.html">
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                         不同网络类型的最佳实践
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="7" data-path="configure-nginx-combo-with-http-request.html">
            
                
                    <a href="./configure-nginx-combo-with-http-request.html">
                        <i class="fa fa-check"></i>
                        
                            <b>7.</b>
                        
                         Nginx 配置 Combo 合并 HTTP 请求
                    </a>
                
            
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Published using GitBook</a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle font settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle share dropdown"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">Twitter</button>
                <button type="button" data-sharing="google-plus" class="button">Google</button>
                <button type="button" data-sharing="facebook" class="button">Facebook</button>
                <button type="button" data-sharing="weibo" class="button">Weibo</button>
                <button type="button" data-sharing="instapaper" class="button">Instapaper</button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
    
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="./" >前端性能优化</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-gitbook_162">
                    
                        <h2 id="">雅虎优化法则</h2>
<h4 id="1-http">1. 减少HTTP请求</h4>
<h6 id="minimize-http-requests"><em>Minimize HTTP Requests</em></h6>
<p>图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。--&gt;</p>
<h4 id="2-cdn">2. 利用CDN技术</h4>
<h6 id="use-a-content-delivery-network"><em>Use a Content Delivery Network</em></h6>
<p>CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。</p>
<h4 id="3-">3. 设置头文件过期或者静态缓存</h4>
<h6 id="add-an-expires-or-a-cache-control-header"><em>Add an Expires or a Cache-Control Header</em></h6>
<p>浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。*</p>
<h4 id="4-gzip">4. Gzip压缩</h4>
<h6 id="gzip-components"><em>Gzip Components</em></h6>
<p>Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。</p>
<h4 id="5-css">5. 把CSS放顶部</h4>
<h6 id="put-stylesheets-at-the-top"><em>Put Stylesheets at the Top</em></h6>
<p>让浏览者能尽早的看到网站的完整样式。</p>
<h4 id="6-js">6. 把JS放底部</h4>
<h6 id="put-scripts-at-the-bottom"><em>Put Scripts at the Bottom</em></h6>
<p>网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。</p>
<h4 id="7-css-expressions">7. 避免CSS Expressions</h4>
<h6 id="avoid-css-expressions"><em>Avoid CSS Expressions</em></h6>
<p>CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~</p>
<h4 id="8--jscss">8.  将JS和CSS外链</h4>
<h6 id="make-javascript-and-css-external"><em>Make JavaScript and CSS External</em></h6>
<p>前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！~</p>
<h4 id="9-dns">9. 减少DNS查找</h4>
<h6 id="reduce-dns-lookups">Reduce DNS Lookups</h6>
<p>貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了。</p>
<h4 id="10-jscss">10. 减小JS和CSS的体积</h4>
<h6 id="minify-javascript-and-css">Minify JavaScript and CSS</h6>
<p>写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。</p>
<h4 id="11-">11. 避免重定向</h4>
<h6 id="avoid-redirects"><em>Avoid Redirects</em></h6>
<p>再写入链接时，虽然<a href="http://www" target="_blank">http://www</a>. today-s-ooxx. com和<a href="http://www" target="_blank">http://www</a>. today-s-ooxx. com/ 仅有一个最后的/只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。</p>
<h4 id="12-">12. 删除重复脚本</h4>
<h6 id="remove-duplicate-scripts">Remove Duplicate Scripts</h6>
<p>重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。</p>
<h4 id="13-etags">13. 配置ETags</h4>
<h6 id="configure-etags">Configure ETags</h6>
<p>搞不清楚咋回事，总之我是在. htaccess里把它删除了。</p>
<h4 id="14-ajax">14. 缓存Ajax</h4>
<h6 id="make-ajax-cacheable">Make Ajax Cacheable</h6>
<p>Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。</p>
<h4 id="15-">15. 尽早的释放缓冲</h4>
<h6 id="flush-the-buffer-early">Flush the Buffer Early</h6>
<p>当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。</p>
<h4 id="16-getajax">16. 用GET方式进行AJAX请求</h4>
<h6 id="use-get-for-ajax-requests">Use GET for AJAX Requests</h6>
<p>Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。</p>
<h4 id="17-">17. 延迟加载组件</h4>
<h6 id="post-load-components">Post-load Components</h6>
<p>最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子。</p>
<h4 id="18-">18. 预加载组件</h4>
<h6 id="preload-components">Preload components</h6>
<p>提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。</p>
<h4 id="19-dom">19. 减少DOM元素数量</h4>
<h6 id="reduce-the-number-of-dom-elements">Reduce the Number of DOM Elements</h6>
<p>复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。</p>
<h4 id="20-">20. 跨域分离组件</h4>
<h6 id="split-components-across-domains">Split Components Across Domains</h6>
<p>页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。</p>
<h4 id="21-minimize-the-number-of-iframes">21. Minimize the Number of iframes</h4>
<h6 id="iframe">减少iframe数量</h6>
<p>需要更有效的利用 ifames。
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本。
iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义。</p>
<h4 id="22-no-404">22. No 404</h4>
<h6 id="404">不要出现404页面</h6>
<p>站点本身不要（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。</p>
<h4 id="23-cookie">23. 减小Cookie</h4>
<h6 id="reduce-cookie-size">Reduce Cookie Size</h6>
<p>Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。</p>
<h4 id="24-cookie">24. 对组件使用无Cookie的域名</h4>
<h6 id="use-cookie-free-domains-for-components">Use Cookie-free Domains for Components</h6>
<p>对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。</p>
<h4 id="25-dom">25. 减少DOM的访问次数</h4>
<h6 id="minimize-dom-access">Minimize DOM Access</h6>
<p>JS访问DOM是很慢的，尽量不要用JS来设置页面布局。</p>
<h4 id="26-">26. 开发灵活的事件处理句柄</h4>
<h6 id="develop-smart-event-handlers">Develop Smart Event Handlers</h6>
<p>DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄</p>
<h4 id="27---link--import">27.  使用&lt; link &gt;而非 @import</h4>
<h6 id="choose--link-over-import">Choose &lt; link &gt;over @import</h6>
<p>在IE中使用@import就和在页面底部用&lt; link &gt;一样，我们前面说要把&lt; link &gt;放顶部的。</p>
<h4 id="28-">28. 避免过滤器的使用</h4>
<h6 id="avoid-filters">Avoid Filters</h6>
<p>如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。</p>
<h4 id="29-">29. 优化图片</h4>
<h6 id="optimize-images">Optimize Images</h6>
<p>将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。</p>
<h4 id="30-css-sprites">30. 优化CSS Sprites</h4>
<h6 id="optimize-css-sprites">Optimize CSS Sprites</h6>
<p>在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。</p>
<h4 id="31-html">31. 不要在HTML中缩放图片</h4>
<h6 id="dont-scale-images-in-html">Don’t Scale Images in HTML</h6>
<p>图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的。</p>
<h4 id="32-faviconico">32. 缩小favicon.ico的大小并缓存它</h4>
<h5 id="make-favicon-ico-small-and-cacheable">Make favicon. ico Small and Cacheable</h5>
<p>站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。</p>
<h4 id="33-keep-components-under-25k">33. Keep Components under 25K</h4>
<h6 id="25k">保证组件在25K以下</h6>
<p>iPhone不能缓存25K以上的组件，并且这还是要在被压缩前。</p>
<h4 id="34-pack-components-into-a-multipart-document">34. Pack Components into a Multipart Document</h4>
<h6 id="">将组件打包进一个多部分的文档中</h6>
<p>就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持。</p>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="./common-optimization-indicator.html" class="navigation navigation-prev " aria-label="Previous page: 常用的性能优化指标"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="./performance-optimization-tool-using-actual-combat.html" class="navigation navigation-next " aria-label="Next page: 性能优化工具实战"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="gitbook/app.js"></script>

    
    <script src="https://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
